<template>
  <div>
    <el-form :inline="true" :model="search" class="user-search">
      <el-form-item label="">
        <el-input
            size="small"
            v-model="search.name"
            placeholder="输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
            size="small"
            v-model="search.mobile"
            placeholder="输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
            size="small"
            v-model="search.idNumber"
            placeholder="输入身份证号"
        ></el-input>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
        size="small"
        :data="students.filter(
        (data) =>
      (!search ||
      data.name.toLowerCase().includes(search.name.toLowerCase())) &&
      (!search.mobile || data.mobile.includes(search.mobile))&&
      (!search.idNumber || data.idNumber.includes(search.idNumber))
      )"

        highlight-current-row
        v-loading="table_loading"
        border
        element-loading-text="拼命加载中"
        style="width: 90%"
    >
      <el-table-column align="center" type="selection" width="50">

      </el-table-column>
      <el-table-column
          align="center"
          prop="name"
          label="姓名"
          min-width="120"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="sex"
          label="性别"
          min-width="70"
          filter-placement="bottom-end"
          :filters="[
          { text: '女', value: '女' },
          { text: '男', value: '男' },
        ]"
          :filter-method="sexFilter"
      >
      </el-table-column>
      <el-table-column
          align="center"
          sortable=""
          prop="age"
          label="年龄"
          min-width="70"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="mobile"
          label="手机号码"
          min-width="120"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="idNumber"
          label="身份证号"
          min-width="150"
      >
      </el-table-column>
      <el-table-column
          align="center"
          sortable=""
          prop="date_time"
          label="申请时间"
          min-width="150"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="major"
          label="专业"
          min-width="100"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="uclass"
          label="班级"
          min-width="100"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="state2"
          label="状态"
          min-width="120"
          filter-placement="bottom-end"
          :filters="[
          { text: '未通过', value: false },
          { text: '已通过', value: true },
        ]"
          :filter-method="stateFilter"
      >
        <template #default="scope">
          <el-switch
              v-show="scope.row.pass"
              v-model="scope.row.state2"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeSwitch($event,scope.row)"
          >
          </el-switch>
          <div v-show="!scope.row.pass">
            <el-popover
                ref="popover"
                placement="bottom"
                title="审批信息"
                width="200"
                trigger="hover"
            >
              <template #default>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="passStudent(scope.row,1)">拒绝</el-button>
                  <el-button type="primary" size="mini" @click="passStudent(scope.row,2)">通过</el-button>
                </div>
              </template>
              <template #reference>
                <el-tag>待审批</el-tag>
              </template>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="500">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button
          >
          <el-button
              size="mini"
              type="success"
              @click="resetpwd(scope.$index, scope.row)"
          >重置密码
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
        :title="title"
        v-model="editFormVisible"
        width="30%"
    >
      <el-form
          label-width="80px"
          ref="editForm"
          :model="editForm"
          :rules="rules"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
              size="small"
              v-model="editForm.name"
              auto-complete="off"
              placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input
              size="small"
              v-model="editForm.idNumber"
              auto-complete="off"
              placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input
              size="small"
              v-model="editForm.mobile"
              auto-complete="off"
              placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input
              size="small"
              v-model="editForm.major"
              auto-complete="off"
              placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="uclass">
          <el-input
              size="small"
              v-model="editForm.uclass"
              auto-complete="off"
              placeholder="请输入班级"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="editForm.sex" label="男">男</el-radio>
          <el-radio v-model="editForm.sex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button size="small" @click="editFormVisible=false">取消</el-button>
        <el-button
            size="small"
            type="primary"
            :loading="submit_loading"
            class="title"
            @click="submitForm()"
        >保存
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 数据权限 -->
  </div>
</template>

<script>
import {getStudents} from "/src/network/teacher";

import Pagination from "/src/components/Pagination";
import {attributeCount, getAge, Msg} from "/src/utils/pubMethod";
import {changePwd} from "/src/network/account"
import {changeStudentInfo} from "../../../network/student";

export default {
  name: "ApprovalStudent",
  components: {
    Pagination
  },
  data() {
    return {
      visible:false,
      students: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      // 请求数据参数
      search: {
        page: 1,
        limit: 10,
        deptId: "",
        name: "",
        idNumber: "",
        mobile: "",
      },
      table_loading: false, //是显示加载
      editForm: {},
      editFormVisible: false, //控制编辑页面显示与隐藏
      submit_loading: false,
      rules: {
        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
        major: [{required: true, message: "请输入姓名", trigger: "blur"}],
        uclass: [{required: true, message: "请输入姓名", trigger: "blur"}],
        mobile: [
          {required: true, message: "请输入手机号", trigger: "blur"},
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
        idNumber: [
          {required: true, message: "请输入身份证号", trigger: "blur"},
          {
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            required: true,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        visible: false
      },
      title: "修改信息",
      // 编辑与添加
      // rules表单验证
    };
  },
  created() {
    this.getStudents()
  },
  methods: {
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.changeStudentInfo(this.editForm);
        }
      });
    },
    handleEdit(index, row) {
      this.editFormVisible = true
      this.title = "修改信息"
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    deleteUser(index, row) {

    },
    passStudent(row, value) {
      console.log(row)
      row.state = value
      this.changeStudentInfo(row)
    },
    changeSwitch(a, row) {
      if (attributeCount(row) > 2) {
        let status = a === true ? '允许' : '拒绝'
        this.$confirm(`是否${status}该用户？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: 'info'
        }).then((res) => {
          row.state = row.state2===true?2:1
          // 修改用户信息
          this.changeStudentInfo(row)
        }).catch(() => {
          // 取消改变
          row.state2 = a === false;
          Msg(this.$message, 'error', '已取消')
        })
      }
    },
    resetpwd(index, row) {
      let data = {
        mobile: row.mobile,
        newPwd: '123456',
        password: ''
      }
      this.changePwd(data)
    },
    img(index, row) {
      this.visible[index] = true;
    },

    sexFilter(value, row) {
      return row.sex === value;
    },
    stateFilter(value, row) {
      return row.state2 === value;
    },
    getStudents() {
      this.table_loading = true
      getStudents().then(
          (res) => {
            this.table_loading = false
            this.students = res.data;
            console.log(res.data)
            let that = this
            this.students.forEach(function (item, index) {
              that.students[index].pass = item.state !== 0;
              that.students[index].state2 = item.state === 2;
              that.students[index].age = getAge(item.birthday)
            })
          },
          (err) => {
            this.$message.error("请求失败");
          }
      );
    },
    changeStudentInfo(editForm) {
      this.submit_loading = true;
      changeStudentInfo(editForm).then(res => {
        try {
          if (res.code === 200) {
            Msg(this.$message, 'success', '修改成功')
            this.editFormVisible = false
            this.getStudents()
          }
        } catch (e) {
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {

      })
      this.submit_loading = false;
    },
    changePwd(data) {
      changePwd(data).then(res => {
        try {
          if (res.code === 200) {
            Msg(this.$message, 'success', '密码重置：123456')
          }
        } catch (e) {
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {
      })
    }
  },
};
</script>

<style scoped>
</style>